<template>
  <div class="equipmentManage">
    <div class="mainPage" v-if="!isAdd">
      <div class="search">
        <el-form :inline="true" :model="equipmentManage" class="demo-form-inline companyAdd">
          <el-form-item label="单位名称">
            <el-input v-model="equipmentManage.companyName" placeholder="单位名称"></el-input>
          </el-form-item>
          <el-form-item label="单位类型">
            <el-select v-model="equipmentManage.companyType" placeholder="单位类型" @change="getCompanyType">
              <el-option :label="item.name" :value="item.id" v-for="item in companyTypeList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行业类别">
            <el-select v-model="equipmentManage.industryType" placeholder="行业类别">
              <el-option :label="item.name" :value="item.id" v-for="item in industryLists" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="危废名称">
            <el-select v-model="equipmentManage.wasteType" placeholder="危废名称">
              <el-option :label="item.name" :value="item.id" v-for="item in wasteTypeLists" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" class="addBtn" @click="addCar">新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="设备ID"></el-table-column>
          <el-table-column label="所属单位" prop="companyName"></el-table-column>
          <el-table-column prop="wasteTypeName" label="危废名称"></el-table-column>
          <el-table-column prop="totalCapacity" label="设备容量"></el-table-column>
          <el-table-column prop="warningCapacity" label="容量预警值(kg)"></el-table-column>
          <el-table-column prop="warningTransport" label="运输预警值(kg)"></el-table-column>
          <el-table-column prop="imei" label="传感器ID"></el-table-column>
          <el-table-column label="单位类别">
            <template slot-scope="scope">
              <span>
                {{ scope.row.companyType === 0 || scope.row.companyType === null ? "N/A":scope.row.companyType === 1? "产废方"
                : scope.row.companyType === 2
                ? "处置方"
                : scope.row.companyType === 3
                ? "运输方"
                : scope.row.companyType === 4
                ? "运营方"
                : scope.row.companyType === 5
                ? "监管"
                : scope.row.companyType === 6
                ? "管理员"
                : "处置运营方"}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="industryName" label="行业类别"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <!-- 这里是新增了呢 -->
    <div class="carAdd" v-if="isAdd&&!isUpdate">
      <el-button type="private" size="small" @click="goBack">返回</el-button>
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="行业类别" prop="industryId">
          <el-select v-model="addForm.industryId" placeholder="行业类别" @change='getValueIndustryId'>
            <el-option :label="item.name" :value="item.id" v-for="item in industryLists" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位类型" prop="companyType">
          <el-select v-model="addForm.companyType" placeholder="单位类型" @change='getCompanyTypes'>
            <el-option :label="item.name" :value="item.id" v-for='item in companyTypeList' :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属单位" prop="companyId">
          <el-select v-model="addForm.companyId" placeholder="所属单位" @visible-change='getCompany' @change='getcurrentcompany'>
            <el-option :label="item.companyName" :value="item.id" v-for='item in companyList' :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <div v-if="haveSelectVaule">
          <el-form-item label="危废名称" prop="wasteTypeId">
            <el-select v-model="addForm.wasteTypeId" placeholder="危废名称" @visible-change='queryWasteTypeById'>
              <el-option :label="item.name" :value="item.id" v-for="item in wasteTypeLists" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备或容器" prop="equipmentOrContainer">
            <el-select v-model="addForm.equipmentOrContainer" placeholder="设备或容器">
              <el-option label="设备" value="0"></el-option>
              <el-option label="容器" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备种类" prop="equipmentType">
            <el-select v-model="addForm.equipmentType" placeholder="设备种类">
              <el-option label="普通" value="0"></el-option>
              <el-option label="标准" value="1"></el-option>
              <el-option label="豪华" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备容量(kg)" prop="capacity">
            <el-input v-model="addForm.capacity"></el-input>
          </el-form-item>
          <el-form-item label="设备预警值(kg)" prop="warningEquipment">
            <el-input v-model="addForm.warningEquipment"></el-input>
          </el-form-item>
          <el-form-item label="运输预警值(kg)" prop="warningTransport">
            <el-input v-model="addForm.warningTransport"></el-input>
          </el-form-item>
          <el-form-item label="传感器ID" prop="equipmentNum">
            <el-input v-model="addForm.warnSensor"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click="onSubmit('addForm')">确定</el-button>
            <el-button @click="cancleUpdate">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="carAdd" v-if="isAdd&&isUpdate">
      <el-button type="private" size="small" @click="goBack">返回</el-button>
      <el-form :model="addForm" ref="addForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="行业类别" prop="industryId">
          <el-select v-model="addForm.industryId" placeholder="行业类别" @change='getValueIndustryId'>
            <el-option :label="item.name" :value="item.id" v-for="item in industryLists" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位类型" prop="companyType">
          <el-select v-model="addForm.companyType" placeholder="单位类型" @change='getCompanyTypes'>
            <el-option :label="item.name" :value="item.id" v-for='item in companyTypeList' :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属单位" prop="companyId">
          <el-select v-model="addForm.companyId" placeholder="所属单位" @visible-change='getCompany' @change='getcurrentcompany'>
            <el-option :label="item.companyName" :value="item.id" v-for='item in companyList' :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="危废名称" prop="wasteTypeId">
            <el-select v-model="addForm.wasteTypeId" placeholder="危废名称" @visible-change='queryWasteTypeById'>
              <el-option :label="item.name" :value="item.id" v-for="item in wasteTypeLists" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备或容器" prop="equipmentOrContainer">
            <el-select v-model="addForm.equipmentOrContainer" placeholder="设备或容器">
              <el-option label="设备" value="0"></el-option>
              <el-option label="容器" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备种类" prop="equipmentType">
            <el-select v-model="addForm.equipmentType" placeholder="设备种类">
              <el-option label="普通" value="0"></el-option>
              <el-option label="标准" value="1"></el-option>
              <el-option label="豪华" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备容量(kg)" prop="capacity">
            <el-input v-model="addForm.capacity"></el-input>
          </el-form-item>
          <el-form-item label="设备预警值(kg)" prop="warningEquipment">
            <el-input v-model="addForm.warningEquipment"></el-input>
          </el-form-item>
          <el-form-item label="运输预警值(kg)" prop="warningTransport">
            <el-input v-model="addForm.warningTransport"></el-input>
          </el-form-item>
          <el-form-item label="传感器ID" prop="equipmentNum">
            <el-input v-model="addForm.warnSensor"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click="onSubmit('addForm')">确定</el-button>
            <el-button @click="cancleUpdate">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import InputSearch from "@/components/InputSearch/InputSearch";
export default {
  name: "equipmentManage",
  inject: ["reload"],
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      equipmentManage: {
        companyName: "",
        companyType: "",
        wasteType: "",
        industryType: ""
      },
      addForm: {
        industryId: "",
        wasteTypeId: "",
        equipmentOrContainer: "",
        equipmentType: "",
        companyType: "",
        companyId: "",
        capacity: "",
        warningTransport: "", //运输预警值
        warningEquipment: "", //设备预警值
        warnSensor: "", //传感器ID、
        id: '',
        updateCompanyid: null,
        updatewasteid: null
      },
      defaultValue: "",
      rules: {
        industryId: [{
          type: 'number',
          required: true,
          message: "请选择行业类别",
          triggle: "change"
        }],
        wasteTypeId: [{
          type: 'number',
          required: true,
          message: "请选择危废名称",
          triggle: "change"
        }],
        equipmentOrContainer: [{

          required: true,
          message: "请选择设备或容器",
          triggle: "change"
        }],
        equipmentType: [{

          required: true,
          message: "请选择设备种类",
          triggle: "change"
        }],
        companyType: [{
          type: 'number',
          required: true,
          message: "请选择单位类型",
          triggle: "change"
        }],

        companyId: [{
          type: 'number',
          required: true,
          message: "请填写所属单位",
          triggle: "change"
        }],
        capacity: [{

          required: true,
          message: "请填写设备容量",
          triggle: "blur"
        }],
        warningEquipment: [{

          required: true,
          message: "请填写设备预警值",
          triggle: "blur"
        }],
        warningTransport: [{

          required: true,
          message: "请填写运输预警值",
          triggle: "blur"
        }],

      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      isUpdate: false,
      companyTypeList: [],
      companyList: [],
      industryLists: [],
      wasteTypeLists: [],
      haveSelectVaule: false,
      selectIndustryId: '',
      selectCompanyType: ''
    };
  },
  created() {
    this.initList();
    // 获取单位类型
    this.$common.$ajax("/sys/company/type/list", {}, "get").then(res => {
      this.companyTypeList = res.data.body;
    });
    // 获取行业类别
    this.$common.$ajax("/sys/industry/list", {}, "get").then(res => {
      this.industryLists = res.data.body;
    });

    // 获取危废类型
    // this.$common.$ajax("/wf/wastetype/wastetype", {}, "get").then(res => {
    //   this.wasteTypeLists = res.data.body;
    // });


  },
  mounted() {
    // 获取所属公司
    // this.$common.$ajax("/sys/company/list", { page: 1, limit: 100000000 }, "get").then(res => {
    //   this.companyList = res.data.body.list;
    // });

  },
  methods: {
    //根据行业id查询单位类型和所属公司
    getValueIndustryId(val) {
      console.log(val) //行业id
      this.selectIndustryId = val
    },
    //获取公司类型
    getCompanyTypes(val) {
      this.selectCompanyType = val
    },

    //所属公司
    getCompany(val) {
      this.$common.$ajax('/sys/company/select', {
        industryId: this.selectIndustryId,
        companyType: this.selectCompanyType
      }, 'get').then(res => {
        this.companyList = res.data.body;
      })
    },
    getcurrentcompany(val) {
      if (val) {
        this.haveSelectVaule = true
      } else {
        this.haveSelectVaule = false
      }
    },
    // 根据公司Id查询危废名称
    queryWasteTypeById(val) {
      this.$common.$ajax('/wf/wastetype/wastetype', {}, 'get').then(res => {
        this.wasteTypeLists = res.data.body;
      })
    },
    initList() {
      this.$common.$ajax(
        "/sys/equipment/list", {
          page: this.page,
          limit: this.limit,
          companyName: this.equipmentManage.companyName,
          wasteType: this.equipmentManage.wasteType,
          companyType: this.equipmentManage.companyType,
          industryId: this.equipmentManage.industryType
        }, "get"
      ).then(res => {
        this.tableData = res.data.body.list;
        this.total = res.data.body.totalCount;
      });
    },
    getCompanyId(val) {
      this.addForm.companyId = val[0].value;
    },
    getCompanyType(val) {
      this.equipmentManage.companyType = val;
    },
    addCar() {
      this.isAdd = true;
      this.isUpdate = false;
    },
    onSearch() {
      this.initList();
    },
    resetSeachConditions() {
      this.equipmentManage.companyName = "";
      this.equipmentManage.companyType = "";
      this.equipmentManage.industryType = "";
      this.equipmentManage.wasteType = "";
      this.initList();
    },
    // 编辑车辆信息
    handleUpdate(scope) {
      console.log(scope);
      this.isAdd = true;
      this.isUpdate = true;

      // 赋值
      this.addForm.industryId = scope.industryId;
      this.addForm.wasteTypeId = scope.wasteTypeName;
      this.addForm.equipmentOrContainer = scope.equipment == 0 ? '设备' : '容器';
      this.addForm.equipmentType = scope.equipClass == 0 ? '普通' : scope.equipClass == 1 ? '标准' : '豪华';
      this.addForm.companyType = scope.companyType;
      this.addForm.companyId = scope.companyName;
      this.addForm.capacity = scope.totalCapacity;
      this.addForm.warningEquipment = scope.warningCapacity;
      this.addForm.warningTransport = scope.warningTransport;
      this.addForm.warnSensor = scope.imei;
      this.addForm.id = scope.id;
      this.addForm.updateCompanyid = scope.companyId;
      this.addForm.updatewasteid = scope.wasteTypeId;



    },
    // 删除车辆
    handleDelete(scope) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$common
            .$ajax("/sys/equipment/delete", { equipmentId: scope.id }, "get")
            .then(res => {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.reload();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.$common
              .$ajax("/sys/equipment/update", {
                id: this.addForm.id,
                companyId: this.addForm.updateCompanyid,
                equipClass: this.addForm.equipmentType == '普通' ? 0 : this.addForm.equipmentType == '标准' ? 1 : 2,
                equipment: this.addForm.equipmentOrContainer == '设备' ? 0 : 1,
                imei: this.addForm.warnSensor,
                // name: "QXHW080000692018116SE",
                // stockCapacity: 0,//库存容量
                totalCapacity: this.addForm.capacity,
                // unitType: "QX490000672018112RB",//设备型号
                warningCapacity: this.addForm.warningEquipment,
                wasteTypeId: this.addForm.updatewasteid,
                // wasteTypeName: "废机油壶",
                warningTransport: this.addForm.warningTransport,
              }, "post")
              .then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功"
                });
                this.reload();
              });
          } else {
            this.$common
              .$ajax(
                "/sys/equipment/save", {
                  companyId: this.addForm.companyId,
                  equipClass: this.addForm.equipmentType,
                  equipment: this.addForm.equipmentOrContainer,
                  imei: this.addForm.warnSensor,
                  // name: "QXHW080000692018116SE",
                  // stockCapacity: 0,//库存容量
                  totalCapacity: this.addForm.capacity,
                  // unitType: "QX490000672018112RB",//设备型号
                  warningCapacity: this.addForm.warningEquipment,
                  wasteTypeId: this.addForm.wasteTypeId,
                  // wasteTypeName: "废机油壶",
                  warningTransport: this.addForm.warningTransport,
                  // equipCriticality: "HW49"
                },
                "post"
              )
              .then(res => {
                this.$message({
                  type: "success",
                  message: "新增成功"
                });

                this.reload();
              });
          }
        } else {
          console.log("error submit");
        }
      });
    },
    cancleUpdate() {
      this.reload();
    },
    goBack() {
      this.reload();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList();
    }
  },
  components: {
    InputSearch
  }
};

</script>
<style lang="scss" scoped>
.equipmentManage {
  .search {
    display: flex;
    justify-content: space-between;

    .addBtn {
      height: 40px;
    }
  }
}

.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
}

</style>
